<template>
	<view class="jgmx-box columnbox wdh-100">
		<view class="rowbox wdh-100 spb">
			<view class="q-title columnbox als">
				<view>共{{list.length}}味药，共{{ycPrice}}元</view>
				<view class="q-line"></view>
			</view>
		</view>
		<view class="wdh-100" v-for="(item,index) in list" :key='index'>
			<view class="rowbox wdh-100 spb one-jgmx">
				<view>{{item.name}}</view>
				<view v-if="item.price>0">{{item.gram}}克 *
					¥{{item.price.toFixed(2)}}=¥{{(item.gram*item.price).toFixed(2)}}</view>
				<view v-else>缺药</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				ycPrice: 0
			};
		},
		onLoad(options) {
			this.list = JSON.parse(options.list)
			let price = 0
			this.list.forEach(v => {
				price += v.price * v.gram
			})
			this.ycPrice = price.toFixed(2)
		}
	}
</script>

<style lang="scss" scoped>
	.q-title {
		font-weight: bold;
		font-size: 32rpx;
		color: #202020;
		font-family: PingFang SC;
		line-height: 40rpx;
		margin-bottom: 20rpx;
	}

	.q-title>view:nth-child(1) {
		position: relative;
		z-index: 4;
	}

	.q-line {
		background: linear-gradient(to right, #00b6b2, rgba(#00b6b2, 0));
		width: 70rpx;
		height: 15rpx;
		margin-top: -15rpx;
	}

	.jgmx-box {
		padding: 0 32rpx;
	}

	.one-jgmx {
		padding: 32rpx 0;
		border-bottom: #f3f7fa solid 1px;
		color: #232323;
		font-size: 28rpx;
	}
</style>